@extends('home.layout.base')
<link rel="stylesheet" href="{{URL::asset('./css/hrmy/order.css')}}">
@section('content')
<div class="mainHrContent" id="hrOrder">
    <div class="storelistTitle" id="storelistTitle" v-cloak>
        <span class="storelistTitle_left">
            <span>
                <img src="{{URL::asset('./img/icon/home.png')}}">
            </span>
            <span><a href="{{route('home.index.index') }}">首页</a> >
                <a href="{{route('home.suppliermy.supplierIndex') }}">供应商中心</a>
                > 订单管理中心
            </span>
        </span>
        <!-- <span class="storelistTitle_right">
            <span>找不到合适的供应商？发个需求试试？</span>
            <button @click=" window.location.href = '{{ route('home.demand.demandAdd') }}'">免费发布需求</button>
        </span> -->
    </div>
    <div class="hrContent">
        @include('home.suppliermy.menu')
        <div class="basicInfo" id="hrOrders" v-cloak>
            <div class="basicInfo_title">
                <span></span>
                订单管理中心
            </div>
            <div class="orderMain">
                <div class="orderMain_header">
                    <span>订单状态：</span>
                    <button :class="{active:state_type==0}" @click="state_type=0">全部</button>
                    <button :class="{active:state_type==1}" @click="state_type=1">
                        <img src="{{URL::asset('./img/icon/order_2.png')}}">
                        待发货
                    </button>
                </div>
                <div class="orderMain_thead">
                    <span class="table_1" style="width:314px">
                        订单详情
                    </span>
                    <span class="table_4" style="width:47px">
                        价格
                    </span>
                    <span class="table_4">
                        数量
                    </span>
                    <span class="table_2" style="margin-left:58px">
                        金额
                    </span>
                    <span class="table_3">
                        交易状态
                    </span>
                    <span class="table_4">
                        操作
                    </span>
                </div>
                <div class="orderMain_tbody" v-for="items in listData">
                    <div class="tbody_thead">
                        <span>
                            <p>订单号：@{{items.order_sn}}</p>
                            <p>下单时间：@{{items.created_at}}</p>
                            <p>@{{items.store_name}}</p>
                        </span>
                        <p>@{{items.reciver_info.realname}} @{{items.reciver_info.phone}} @{{items.reciver_info.area}}  @{{items.reciver_info.detail}}</p>
                    </div>
                    <div class="tbody_tbody" v-for="item in items.goods_list">
                        <span class="table_1">
                            <img :src="item.goods_image">
                            <span><a :href="'{{route('home.goods.goodsDetails') }}?goodsId='+item.id+'&type='+item.goods_type">
                                    @{{item.goods_name}}</a>
                            </span>
                            <span v-if="item.goods_type!=3">
                                <i style="font-style:normal;" v-if="item.goods_price!=0.00">￥@{{item.goods_price}}</i>
                                <i style="font-style:normal;" v-else>免费</i>
                            </span>
                            <span v-else>
                                <i style="font-style:normal;" v-if="item.goods_price!=0.00">@{{item.goods_price}}积分</i>
                                <i style="font-style:normal;" v-else>免费</i>
                            </span>
                            <span>1</span>
                        </span>
                        <span class="table_2">
                            <p v-if="item.goods_type!=3">
                                <span v-if="item.goods_pay_price!=0.00">￥@{{item.goods_pay_price}}</span>
                                <span v-else>免费</span>
                            </p>
                            <p v-else>
                                <span v-if="item.goods_pay_price!=0.00">@{{item.goods_pay_price}}积分</span>
                                <span v-else>免费</span>
                            </p>
                            <p>@{{items.pay_method==1?'微信支付':'积分兑换'}}</p>
                        </span>
                        <span class="table_3">
                            <p>@{{items.order_state==1?'已取消':items.order_state==2?'未付款':items.order_state==3?'已付款':items.order_state==4?'已发货':'已收货'}}</p>
                        </span>
                        <span class="table_4">
                            <button v-if="items.is_send==1" @click="changeDialog(items)">
                                发货
                            </button>
                        </span>
                    </div>
                </div>
            </div>
            <el-dialog :visible.sync="dialogVisible" width="557px" :before-close="handleClose">
                <div class="basicInfo_title">
                    <span></span>
                    添加物流信息
                    <a class="dialogFalse" @click="dialogVisible=false">×</a>
                </div>
                <div class="dialogMain">
                    <el-form :model="form" :rules="rules" ref="ruleForm">
                        <el-form-item prop="logisticsCompany">
                            <p>物流公司：<el-input v-model="form.logisticsCompany" placeholder="请填写物流公司"></el-input>
                            </p>
                        </el-form-item>
                        <el-form-item prop="logisticsNum">
                            <p>物流单号：<el-input v-model="form.logisticsNum" placeholder="请填写物流单号"></el-input>
                            </p>
                        </el-form-item>
                    </el-form>
                    <button @click="submitForm('ruleForm')">确认发货</button>
                </div>
            </el-dialog>
            <div class="elementPage" style="margin-top: 20px;" v-if="pageCount>0">
                <el-pagination :pager-count="5" @current-change="handleCurrentChange" :current-page.sync="pageNumber" background prev-text="上一页" next-text="下一页" layout="prev, pager, next,jumper" :total="pageCount">
                </el-pagination>
            </div>

        </div>
    </div>

</div>
<style>
    .dialogMain .el-form-item__error {
        left: 80px;
    }

    .dialogMain button {
        border: 0px;
        background: rgba(209, 0, 24, 1);
        opacity: 1;
        border-radius: 2px;
        padding: 4px 29px;
        font-size: 16px;
        font-family: Source Han Sans CN;
        font-weight: 400;
        color: rgba(255, 255, 255, 1);
        display: block;
        margin: auto;
        margin-top: 40px;
    }

    .tbody_tbody .table_4>button {
        padding: 0px 28px;
    }
</style>
@endsection
@section('compontentScipts')
<script>
    $(() => {
        let hrOrder = new Vue({
            el: '#hrOrders',
            data: () => {
                return {
                    pageNumber: 1,
                    pageCount: 0,
                    listData: [],
                    state_type: 0,
                    dialogVisible: false,
                    status: 3,
                    copyCode: '',
                    form: {
                        logisticsCompany: '',
                        logisticsNum: '',
                    },
                    copyText: '',
                    dialogItem: {},
                    rules: {
                        logisticsCompany: [{
                            required: true,
                            message: '请填写物流公司',
                            trigger: 'blur'
                        }],
                        logisticsNum: [{
                            required: true,
                            message: '请填写物流单号',
                            trigger: 'blur'
                        }],
                    }
                }
            },
            watch: {
                state_type(newV) {
                    this.getList();
                }
            },
            created() {
                this.getList();
            },
            mounted() {},
            methods: {
                getList() {
                    let data = {
                        page: this.pageNumber,
                        state_type: this.state_type
                    }
                    apiAjax("{{ route('home.user.supplierOrderListApi')}}", 'get', data, (res) => {
                        if (res.code == 0) {
                            this.pageCount = res.data.total;
                            this.listData = res.data.data;
                        } else {
                            this.$message({
                                message: res.msg,
                                type: 'warning'
                            });
                        }
                    }, (erro) => {

                    });
                },
                handleCurrentChange(val) {
                    this.pageNumber = val;
                    this.getList();
                },
                handleClose(done) {
                    this.dialogVisible = false;
                },
                changeDialog(item) {
                    this.dialogItem = item;
                    this.dialogVisible = true;

                },
                submitForm(formName) {
                    this.$refs[formName].validate((valid) => {
                        if (valid) {
                            let data = {
                                order_id: this.dialogItem.id,
                                shipping_code: this.form.logisticsCompany,
                                shipping_sn: this.form.logisticsNum,
                            }
                            debugger
                            apiAjax("{{ route('home.user.supplierDelivery')}}", 'post', data, (res) => {
                                if (res.code == 0) {
                                    this.$message({
                                        message: res.msg,
                                        type: 'success'
                                    });
                                    this.dialogItem = {};
                                    this.form.logisticsCompany = "";
                                    this.form.logisticsNum = "";
                                    this.getList();
                                    this.dialogVisible=false;
                                } else {
                                    this.$message({
                                        message: res.msg,
                                        type: 'warning'
                                    });

                                }
                            }, (erro) => {

                            });
                        } else {
                            return false;
                        }
                    });
                },
            }
        })
    })
</script>
@endsection